<template>
    <!-- pages/collect/collect.wxml -->
    <view class="back">
        <view class="collectbar"><collectbar></collectbar></view>
        <view class="title-btn">
            <view
                :data-index="index"
                :class="'title-btn-item ' + (activeIndex === index ? 'active' : '')"
                @tap="onTitleBtnTap"
                v-for="(item, index) in ['全部', '正在热卖', '即将上线']"
                :key="index"
            >
                {{ item }}
            </view>
        </view>
        <view class="collect-page">
            <view class="collect-list">
                <block v-for="(item, index) in collectGoods" :key="index">
                    <view class="collect-item" @tap="onGoodsDetail" :data-gid="item.goods_id">
                        <view class="image-box">
                            <image class="goods-image" :src="item.goods_small_logo"></image>
                        </view>
                        <view class="goods-info">
                            <text class="goods-name">{{ item.goods_name }}</text>
                            <text class="goods-price">￥{{ item.goods_price }}</text>
                        </view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import collectbar from '../../Comp/collectbar/collectbar';
// pages/collect/collect.js
export default {
    components: {
        collectbar
    },
    data() {
        return {
            collectGoods: [],
            activeIndex: 0
        };
    },
    onLoad: function () {
        this.loadCollectGoods();
    },
    onShow: function () {
        this.setData({
            collectGoods: []
        });
        this.loadCollectGoods();
    },
    methods: {
        loadCollectGoods: function () {
            const collectList = uni.getStorageSync('collectList') || {};
            for (const goodsId in collectList) {
                if (collectList[goodsId]) {
                    this.getGoodsDetail(goodsId);
                }
            }
        },

        getGoodsDetail: function (goodsId) {
            const url = 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail/?goods_id=' + goodsId;
            uni.request({
                url: url,
                method: 'GET',
                success: (res) => {
                    if (res.data && res.data.message) {
                        const goodsDetail = res.data.message;
                        const exists = this.collectGoods.some((item) => item.goods_id === goodsDetail.goods_id);
                        if (!exists) {
                            this.setData({
                                collectGoods: [...this.collectGoods, goodsDetail]
                            });
                        }
                    }
                },
                fail: (err) => {
                    console.error('请求失败:', err);
                }
            });
        },

        onTitleBtnTap: function (e) {
            const index = e.currentTarget.dataset.index;
            this.setData({
                activeIndex: index
            });
        },

        onGoodsDetail: function (event) {
            const gid = event.currentTarget.dataset.gid;
            console.log('onGoodsDetail gid:', gid);
            uni.navigateTo({
                url: `/pages/goodsdetails/goodsdetails?gid=${gid}`
            });
        }
    }
};
</script>
<style>
/* pages/collect/collect.wxss */
.title-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 85rpx;
    background-color: rgb(250, 244, 244);
}
.title-btn-item {
    margin-left: 15rpx;
    height: 50rpx;
    line-height: 50rpx;
    border: 1rpx solid grey;
    background-color: white;
    cursor: pointer;
    padding: 0 10rpx;
}
.title-btn-item.active {
    color: red;
    border-color: red;
}
.collect-item {
    display: flex;
    margin: 25rpx 15rpx;
    background-color: white;
    border-bottom: 1rpx solid gray;
}
.goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.image-box {
    width: 200rpx;
    height: 150rpx;
    margin-right: 25rpx;
}
.goods-image {
    width: 200rpx;
    height: 150rpx;
}
.goods-price {
    color: red;
}
.back {
    width: 100%;
    height: 100%;
    background-color: rgb(245, 241, 241);
}
</style>
